<template>
<flexbox :gutter="0">
  <flexbox-item @touchstart.native="changeTabImg('Rank', 'p')"
                @touchend.native="changeTabImg('Rank', 'n')"
                v-if="isshowmtab('Rank')">
    <flexbox align="center"
             justify="center"
             class="flex-item-drive">
      <img :src="rank">
    </flexbox>
  </flexbox-item>
  <flexbox-item @touchstart.native="changeTabImg('Create', 'p')"
                @touchend.native="changeTabImg('Create', 'n')"
                v-if="isshowmtab('Create')"
                @click.native="createForld">
    <flexbox align="center"
             justify="center"
             class="flex-item-drive">
      <img :src="create">
    </flexbox>
    <div v-transfer-dom>
      <confirm v-model="showCreateForld"
               title="新建文件夹"
               confirm-text="创建"
               @on-show="onShow">
        <div class="createForldContent">
          <x-input placeholder="新建文件夹"
                   height="50px">
            <img slot="label"
                 style="padding-right:10px;display:block;"
                 :src="folderImg"
                 width="50"
                 height="50">
          </x-input>
        </div>
      </confirm>
    </div>
  </flexbox-item>
  <flexbox-item @touchstart.native="changeTabImg('Search', 'p')"
                @touchend.native="changeTabImg('Search', 'n')"
                v-if="isshowmtab('Search')"
                @click.native="searchFile">
    <flexbox align="center"
             justify="center"
             class="flex-item-drive">
      <img :src="search">
    </flexbox>
  </flexbox-item>
</flexbox>

</template>

<script>
import { Flexbox, FlexboxItem, Confirm, XInput, TransferDomDirective as TransferDom } from 'vux';
import rankNormal from '../assets/main_list_header_rank_normal.png';
import rankPressed from '../assets/main_list_header_rank_pressed.png';
import createNormal from '../assets/main_list_header_create_folder_normal.png';
import createPressed from '../assets/main_list_header_create_folder_pressed.png';
import searchNormal from '../assets/main_list_header_search_normal.png';
import searchPressed from '../assets/main_list_header_search_pressed.png';
import folderImg from '../assets/filemanager_folder_icon.png';

export default {
  directives: {
    TransferDom
  },
  components: {
    Flexbox,
    FlexboxItem,
    Confirm,
    XInput
  },
  props: {
    showbar: {
      type: Array,
      default: () => [
        'Rank',
        'Create',
        'Search'
      ]
    }
  },
  data() {
    return {
      clickRank: false,
      clickCreate: false,
      clickSearch: false,
      showCreateForld: false,
      folderImg
    }
  },
  computed: {
    rank() {
      return !this.clickRank ? rankNormal : rankPressed
    },
    create() {
      return !this.clickCreate ? createNormal : createPressed
    },
    search() {
      return !this.clickSearch ? searchNormal : searchPressed
    }
  },
  methods: {
    changeTabImg(k, i) {
      this[`click${k}`] = i === 'n' ? false : true
    },
    isshowmtab(v) {
      return this.showbar.indexOf(v) >= 0
    },
    createForld() {
      this.showCreateForld = true
    },
    onShow() {
      
    },
    searchFile() {
      this.$router.push({ path: '/search' })
    }
  }
}

</script>

<style lang="less">
.flex-item-drive {
  height: 2.5rem;
  background-color: #E9F1F4;
  img {
    height: 70%;
  }
}

.weui-dialog__btn_primary {
  color: white!important;
  background: #2486f5;
}

.weui-dialog__btn_default {
  color: white!important;
  background: #9E9E9E;
}

.createForldContent .weui-input {
  height: 50px;
  line-height: 50px;
  font-size: 20px;
}
</style>
